import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '../views/Layout/index.vue'
// 控制权限防止手输路由
import jwt_decode from 'jwt-decode';


Vue.use(VueRouter)

/**
* hidden: true                   如果hidden为true则在左侧菜单栏展示，否则不显示
* name:'router-name'             路由名称，必须填写
* meta : {
    title: 'title'               对应路由在左侧菜单栏的标题名称
    icon: 'icon-class'           对应路由在左侧菜单栏的图标样式，样式使用fontawesome图标库
  }
**/
export const asyncRouterMap = [
  {//首页默认跳转及默认跳转的页面
    path: '/',
    name: 'dashboard',
    component: Layout,
    hidden: true,
    redirect: '/home',//跳转的页面
    children: [
      {
        path: '/home',
        name: 'home',
        meta: {
          title: '首页',
          icon: 'el-icon-s-home',
        },
        component: () => import('@/views/Home.vue')
      }
    ]
  },
  {//数据管理页面
    path: '/dataManage',
    name: 'dataManage',
    component: Layout,
    redirect: '/tableData',
    hidden: true,
    meta: {
      title: '数据管理',
      icon: 'el-icon-s-data',
    },
    children: [
      {
        path: '/tableData',
        name: 'tableData',
        meta: {
          title: '表格管理',
          icon: 'el-icon-s-order',
        },
        component: () => import('@/views/DataManage/TableData.vue')
      },
      {
        path: '/chartsData',
        name: 'chartsData',
        meta: {
          title: '图表管理',
          icon: 'el-icon-s-marketing',
        },
        component: () => import('@/views/DataManage/ChartsData.vue')
      },
      {
        path: '/formData',
        name: 'formData',
        meta: {
          title: '表单管理',
          icon: 'el-icon-s-order',
          // 权限访问
          roles:['admin','editor']
        },
        component: () => import('@/views/DataManage/FormData.vue')
      }
    ]
  },
  {//用户管理页面
    path: '/userManage',
    name: 'userManage',
    component: Layout,
    hidden: true,
    redirect: '/accountData',
    children: [
      {
        path: '/accountData',
        name: 'accountData',
        meta: {
          title: '账户管理',
          icon: 'el-icon-s-management',
          roles:['admin']
        },
        component: () => import('@/views/UserManage/AccountData.vue')
      },
    ]
  },
  {//用户中心
    path: '/user',
    component: Layout,
    redirect: '/userInfo',
    hidden: false,
    children: [
      {
        path: '/userInfo',
        name: 'userInfo',
        meta: {
          title: '个人中心',
        },
        component: () => import('@/views/UserManage/UserInfo.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    hidden:false,
    meta: {
      title: '系统登录',
    },
    component: () => import('@/views/Login/Login.vue')
  },
  {
    path: '/password',
    name: 'Password',
    hidden:false,
    meta: {
      title: '找回密码',
    },
    component: () => import('@/views/Login/Password.vue')
  },
  {
    path: '/404',
    name: '404',
    hidden:false,
    meta: {
      title: '404',
    },
    component: () => import('@/views/404.vue')
  },
  {
    path: '*',//重定向
    redirect: '/404',
  }
]


const router: any = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: asyncRouterMap
})
router.beforeEach((to: any, from: any, next: any) => {
  const isLogin = localStorage.tsToken ? true : false;
  if (to.path === '/login' || to.path === '/password') {
    next();
  } else {
    if (isLogin) {
      const decode: any = jwt_decode(localStorage.tsToken)
      const { key } = decode
      // 权限判断
      if (hasPermission(key, to)) {
        next();
      } else {
        next('/404'); // 没有权限进入
      }
    } else {
      next('/login');
    }
  }
})
/**
 * 判断是否有权限
 * @param roles 当前角色
 * @param route 当前路由对象
 * */
function hasPermission(roles: string, route: any) {
  if (route.meta && route.meta.roles) {
    // 如果meta.roles是否包含角色的key值,如果包含那么就是有权限,否则无权限
    return route.meta.roles.some((role: string) => role.indexOf(roles) >= 0);
  } else {
    // 默认不设置有权限
    return true;
  }
}

export default router
